import 'package:flutter/material.dart';
import 'package:mc_card/common/config.dart';
import 'package:mc_card/model/shequ/topic_model.dart';

///推荐话题
class TopicNav extends StatelessWidget {
  List<TopicModel> topicList;

  TopicNav({this.topicList});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[topicBar, topicGridView(topicList), topicBottom],
    );
  }
}

Widget get topicBar {
  return Container(
    height: 70,
    color: Colors.white,
    alignment: Alignment.centerLeft,
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Container(
          alignment: Alignment.centerLeft,
          margin: EdgeInsets.only(left: 15),
          child: Text(
            "推荐话题",
            style: TextStyle(fontSize: 18, color: Colors.black, fontWeight: FontWeight.bold),
            textAlign: TextAlign.left,
          ),
        ),
        GestureDetector(
          onTap: () {
            // 跳转到全部话题
          },
          child: Container(
              margin: EdgeInsets.only(right: 15),
              alignment: Alignment.centerRight,
              child: Text(
                "查看全部",
                style: TextStyle(fontSize: 14, color: Colors.grey),
              )),
        )
      ],
    ),
  );
}

class topicGridView extends StatelessWidget {
  List<TopicModel> topicList;

  topicGridView(this.topicList);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      padding: EdgeInsets.fromLTRB(15, 0, 15, 15),
      child: GridView.builder(
        shrinkWrap: true,
        primary: false,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          // 一行3列
          crossAxisCount: 2,
          // 上下 间距
          mainAxisSpacing: 4.0,
          // 左右间距
          crossAxisSpacing: 4.0,
          // 图片长宽比
          childAspectRatio: 3,
        ),
        itemBuilder: (BuildContext context, int index) {
          return Container(
            padding: EdgeInsets.fromLTRB(10, 0, 0, 0),
            color: Color(0xFFF9F9F9),
            child: TopicRow(index),
          );
        },
        itemCount: topicList.length,
      ),
    );
  }

  Row TopicRow(int index) {
    return Row(
            children: <Widget>[
              new Container(
                width: 32.0,
                height: 32.0,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  image: DecorationImage(
                    image: NetworkImage(
                      Config.getImageUrl(topicList[index].pic),
                    ),
                  ),
                ),
              ),
              Padding(
                padding: EdgeInsets.only(left: 6),
                child: Text(topicList[index].title,style: TextStyle(fontSize: 13),),
              )
            ],
          );
  }
}

Widget get topicBottom {
  return Container(
      height: 40,
      color: Colors.white,
      alignment: Alignment.center,
      child: GestureDetector(
        onTap: () {
          print("换一批");
        },
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Icon(Icons.refresh),
            Text(
              "换一批",
              style: TextStyle(color: Colors.grey),
            )
          ],
        ),
      ));
}
